<script>
export default {
    name: "TodoHeader",
    data() {
        return {
            todoName: ""
        }
    },
    methods: {
        handlerAdd() {
            // console.log(this.todoName)
            if (this.todoName.trim() === "") {
                alert("任务名称不能为空！！")
                return
            }
            this.$emit("add", this.todoName)
            this.todoName = ""
        }
    }
}
</script>

<template>
    <!-- 输入框 -->
    <header class="header">
        <h1>小黑子记事本</h1>
        <input @keyup.enter="handlerAdd" v-model.trim="todoName" placeholder="请输入任务" class="new-todo"/>
        <button class="add" @click="handlerAdd">添加任务</button>
    </header>
</template>

<style scoped>

</style>